<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>03-ajax的post请求参数处理</h1>
    <br/>
    <a href="/index.html">返回首页</a>
    <br/><br/>
    <h2>post提交方式的表单</h2>
    <form action="/test02" method="post">
        数值1：<input type="text" name="m1"/><br/><br/>
        数值2：<input type="text" name="m2"/><br/><br/>
        结果 ：<input type="text" name="res" readonly style="border:0px;"/><br/><br/>
        <input type="submit" value="提交">
    </form>

    <script>
        // 获取上面的form表单节点对象
        const form = document.querySelector("form");
        // 为form表单添加提交事件监听
        form.onsubmit = function(){
            // 获取表单中的输入框信息
            let m1 = form.m1.value;
            let m2 = form.m2.value;
           //console.log(m1,m2);
            
            // 通过原生的Ajax操作，将表单参数以post方式提交到 /test02 地址。
            // 1. 创建Ajax的请求XMLHttpRequest对象 
            const xhr = new XMLHttpRequest();
            // 2. 初始化请求信息
            xhr.open("POST","/test02");
            // 设置请求头的内容类型，支持form表单的post提交信息
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            // 3. 发送Ajax请求
            xhr.send(`m1=${m1}&m2=${m2}`);
            // 4. 处理响应内容(绑定请求状态改变回调函数)
            xhr.onreadystatechange = function(){
                // 当前请求状态为4，且响应状态为200，处理响应内容
                if (xhr.readyState == 4){
                    if (xhr.status == 200){
                        // 获取响应内容并输出到网页表单中
                        form.res.value = xhr.responseText;
                    } else {
                        console.log("请失败！响应状态为：", xhr.status);
                    }
                }
            }

            return false; //拦截表单提交
        }
    </script>
</body>
</html>